<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket在线聊天</title>
</head>
<body>
	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://localhost:2048/ws");
			//监听消息
			socket.onmessage = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + '\n' + event.data
			};
			//打开监听
			socket.onopen = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = "连接开启...";
			};
			//关闭监听
			socket.onclose = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + "连接被关闭...";
			};
		} else {
			alert("你的浏览器不支持...");
		}

		function send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (socket.readyState == WebSocket.OPEN) {
				socket.send(message);
			} else {
				alert("连接没有开启...");
			}
		}
	</script>
	<form onsubmit="return false;">
		<h3>同城交友8888群</h3>
		<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
		<input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空" />
		<hr />
		<input type="text" name="message" style="width: 500px" value="" placeholder="聊点什么" />
		<input type="button" value="发送(S)"	onclick="send(this.form.message.value)" />
	</form>
</body>
</html>